import React from 'react';
import { Button, Modal, Form, Input, Select, Icon, DatePicker, Row, Col, Upload} from 'antd';

import styles from '../style.less'

const CreateIntroduce = Form.create({ name: 'introduce_form' })(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        state = {
            loading: false,
            fileList: [
                {
                  uid: '-1',
                  name: 'image.png',
                  status: 'done',
                  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                },
                {
                  uid: '-2',
                  name: 'image.png',
                  status: 'done',
                  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                },
                {
                  uid: '-3',
                  name: 'image.png',
                  status: 'done',
                  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                },
                {
                  uid: '-4',
                  name: 'image.png',
                  status: 'done',
                  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                },
                {
                  uid: '-5',
                  name: 'image.png',
                  status: 'error',
                },
              ],
        }

        componentDidMount() {
        }

        handleChange = ({ fileList }) => this.setState({ fileList })
        
        render() {
            const { visible, onCancel, onCreate, form } = this.props
            const { getFieldDecorator, getFieldValue } = form
            const formItemLayout = {
                labelCol: { span: 6 },
                wrapperCol: { span: 14 }
            }

            return (
                <Modal
                    visible={visible}
                    title="创建简讯"
                    width='60%'
                    onCancel={onCancel}
                    onOk={onCreate}
                >
                    <Form style={{width: '75%', margin:'0 auto'}}>
                        <div style={{width: '100%', display: 'flex', alignItems: 'center', marginBottom: '10px'}}>
                            <span style={{width: '70px', marginRight: '20px', textAlign: 'right', color: 'rgba(0, 0, 0, 0.85)'}}>简讯标题：</span>
                            <Form.Item style={{width: '75%', margin: '0'}}>
                                {getFieldDecorator('title', {
                                    rules: [{ required: true, message: '请输入!'}],
                                })(<Input placeholder="简讯标题" />)}
                            </Form.Item>
                        </div>

                        <div style={{width: '100%', display: 'flex', alignItems: 'center', marginBottom: '10px'}}>
                            <span style={{width: '70px', marginRight: '20px', textAlign: 'right', color: 'rgba(0, 0, 0, 0.85)'}}>期别：</span>
                            <Form.Item style={{width: '70%', margin: '0'}}>
                                {getFieldDecorator('time', {
                                    rules: [{ required: true, message: '请选择!'}],
                                })(<Input style={{width: '22%'}}/>)}
                                <span style={{margin: '0 7px'}}>年</span>
                                {getFieldDecorator('qishu', {
                                    rules: [{ required: true, message: '请输入!'}],
                                })(<Input style={{width: '13%'}}/>)}
                                <span style={{margin: '0 7px'}}>期</span>
                            </Form.Item>
                        </div>

                        <Form.Item label="简讯内容" required={false}>
                            {getFieldDecorator('content', {
                                rules: [{ required: true, message: '请输入!'}],
                            })(<Input.TextArea rows="8" style={{width: '90%'}} placeholder="请输入简讯内容"/>)}
                        </Form.Item>
                        

                        <Row gutter={24} style={{margin: '0'}}>
                            <Form.Item label="产品图片" >
                                <Col span={6}>
                                    <Upload 
                                        name="avatar"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        fileList={this.state.fileList}
                                        showUploadList={false}
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        onChange={this.onChange}
                                    >
                                        <div>
                                            <Icon type={this.state.loading ? 'loading' : 'plus'} />
                                            <div className={styles.antUploadText}>添加图片</div>
                                        </div>
                                    </Upload>
                                </Col>

                            </Form.Item>
                        </Row>

                        <div style={{maxWidth: '300px'}}>
                            <span className={styles.antUploadTextHa}>建议图片为100kb以上的清晰图，支持jpg，jpeg，png，gif等格式。</span>
                        </div>
                            
                    </Form>
                </Modal>
            )
        }
    }
)



export default CreateIntroduce